import { useIntersectionObserver } from "@vueuse/core";

// 定义全局指令
export const ImgLazyPlugin = {
    install(app) {
        app.directive('img-lazy', {
            mounted(el, binding) { // el: 代表使用该指令的元素(标签内使用v-img-lazy) => img
                // binding: binding.value => v-img-lazy="item.picture" 即 item.picture
                useIntersectionObserver(el, (isIntersecting) => {
                    if (isIntersecting) {  // 进入可视区域, 开始加载图片
                        el.src = binding.value;
                        stop() // 在第一次加载完成后停止监听
                    }
                })
            }
        })
    }
}